<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: none;
        }

        .ac {
            color: white;
            background-color: rebeccapurple;
        }
    </style>
</head>

<body>
    <div class="btns">
        <button class="ac">娱乐</button>
        <button>体育</button>
        <button>xxx</button>
    </div>
    <div>
        <ul style="display: block;">
            <li>
                娱乐新闻xx
            </li>
            <li>
                娱乐新闻xx
            </li>
            <li>
                娱乐新闻xx
            </li>
            <li>
                娱乐新闻xx
            </li>
        </ul>
        <ul>
            <li>
                体育新闻xx
            </li>
            <li>
                体育新闻xx
            </li>
            <li>
                体育新闻xx
            </li>
            <li>
                体育新闻xx
            </li>
        </ul>
        <ul>
            <li>
                体育新闻xx2232
            </li>
            <li>
                体育新闻xx
            </li>
            <li>
                体育新闻xx
            </li>
            <li>
                体育新闻xx
            </li>
        </ul>
    </div>
    <script>

        /*  选项卡
            1-  给一组按钮-添加点击事件，
                点击谁，谁有ac类名，其他的按钮都不能有这个类名
        */
        // 1-  给一组按钮-添加点击事件，
        var btns = document.querySelectorAll('.btns button');
        btns.forEach(function (btn, i) {
            btn.onclick = function () {
                // 点击事件的内部
                // btn 点击的按钮
                // i  点击的按钮对应的下标
                console.log(btn, i);
                // 循环遍历所有的btn 都去掉他们的类 
                btns.forEach(function (v) { v.className = '' })
                // 再 给 点击的按钮添加一个类
                btn.className = 'ac'
                // 获取三个ul
                var ulArr = document.querySelectorAll('ul');
                // 找到点击按钮对应的那个ul
                console.log(ulArr[i]);
                //遍历-ulArr dispaly 都是 none
                ulArr.forEach(function (v) { v.style.display = 'none' })
                // 对应的uldipaly 为block
                ulArr[i].style.display = 'block'

            }
        })

    </script>

</body>

</html>